import React, { useRef, useEffect, useState } from 'react';
//导入页头组件
import PageHeader from '@/components/PageHeader';
// 
import { Button } from 'antd'
// 引入模态框组件
import Mymodal from '@/components/Mymodal';
import { getuserlist } from '@/api/user.js'
// 引入表格组件
import Mytable from '@/components/Mytable';
// 导入分页组件
import Mypagination from '@/components/Mypagination';
// 导入当前组件的样式
import '@/assets/user.css';
const Index = () => {
    // 定义响应式数据  userlist
    const [userlist, setUserList] = useState([]);
    //  定义当前页数
    const [currentPage, setCurrentPage] = useState(1)
    // 定义总的数据条数
    const [total, setTotal] = useState(0)

    // 显示添加模态框
    const showAddModal = () => {
        // 01:显示模态框
        ref1.current.showModal();
        // 02:清空模态框
        ref1.current.setUser({ gender: '1' })
        // 03:修改模态框的标题 
        ref1.current.setmymodaltitle('添加')
    }
    // 定义模态框引用对象
    const ref1 = useRef();

    async function getlist() {
        const res = await getuserlist({ page: currentPage })
        // console.log('res', res);
        // 赋值当前页数据
        setUserList(res.data.paginate.data)
        // 赋值 当前页
        setCurrentPage(res.data.paginate.current_page)
        // 赋值总的数据条数
        setTotal(res.data.paginate.total)
        console.log('uselist', res);
    }
    // 请求表格数据
    useEffect(() => {
        // 初始化调用
        getlist()

    }, [currentPage]);
    return (
        <div>
            {/* 页头部分 */}
            <PageHeader title='用户列表'>
                <Button type='primary' onClick={showAddModal}>添加</Button>
            </PageHeader>
            <Mymodal ref={ref1} getlist={getlist} ></Mymodal>
            {/* 表格组件 */}
            {userlist.length > 0 ? <Mytable userlist={userlist} getlist={getlist}></Mytable> : <></>}
            {/* 使用分页组件 */}
            {userlist.length > 0 ? <Mypagination total={total} current={currentPage} setCurrentPage={setCurrentPage}></Mypagination>
                : <></>}
        </div>
    );
}

export default Index;
